<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约拍平台 - 支付订单</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .payment-method {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            background-color: white;
        }
        .payment-method.active {
            border-color: #3b82f6;
            background-color: #f0f7ff;
        }
        .payment-method-radio {
            width: 20px;
            height: 20px;
            border: 2px solid #d1d5db;
            border-radius: 50%;
            margin-right: 12px;
            position: relative;
        }
        .payment-method.active .payment-method-radio {
            border-color: #3b82f6;
        }
        .payment-method.active .payment-method-radio:after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #3b82f6;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .payment-btn {
            width: 100%;
            padding: 14px;
            background-color: #3b82f6;
            color: white;
            border-radius: 8px;
            font-weight: 500;
            text-align: center;
            font-size: 16px;
        }
        .payment-btn:disabled {
            background-color: #93c5fd;
        }
        .order-item {
            border-bottom: 1px solid #f3f4f6;
            padding-bottom: 12px;
            margin-bottom: 12px;
        }
        .order-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
    </style>
</head>
<body>
    <!-- 状态栏将通过JS加载 -->
    
    <div class="pt-7 pb-20">
        <!-- 顶部标题栏 -->
        <div class="bg-white px-4 py-3 flex items-center justify-between sticky top-0 z-10 shadow-sm">
            <a href="booking-detail.html" class="text-gray-800">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-lg font-bold">支付订单</h1>
            <div class="w-5"></div>
        </div>
        
        <!-- 订单信息 -->
        <div class="bg-white p-4 mb-4">
            <h2 class="text-base font-medium mb-3">订单信息</h2>
            
            <div class="flex items-center mb-4">
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-12 h-12 rounded-full object-cover mr-3">
                <div>
                    <div class="font-medium">Sarah摄影师</div>
                    <div class="text-xs text-gray-500">人像写真 | 上海市</div>
                </div>
            </div>
            
            <div class="order-item">
                <div class="flex justify-between mb-1">
                    <div class="text-gray-600">约拍套餐</div>
                    <div class="font-medium">日系写真基础套餐</div>
                </div>
            </div>
            
            <div class="order-item">
                <div class="flex justify-between mb-1">
                    <div class="text-gray-600">约拍时间</div>
                    <div class="font-medium">2023年6月15日 14:00-16:00</div>
                </div>
            </div>
            
            <div class="order-item">
                <div class="flex justify-between mb-1">
                    <div class="text-gray-600">约拍地点</div>
                    <div class="font-medium">上海市静安区某某摄影棚</div>
                </div>
            </div>
            
            <div class="order-item">
                <div class="flex justify-between mb-1">
                    <div class="text-gray-600">套餐内容</div>
                    <div class="font-medium">2小时拍摄 + 10张精修</div>
                </div>
            </div>
        </div>
        
        <!-- 费用明细 -->
        <div class="bg-white p-4 mb-4">
            <h2 class="text-base font-medium mb-3">费用明细</h2>
            
            <div class="flex justify-between mb-2">
                <div class="text-gray-600">套餐价格</div>
                <div>¥599.00</div>
            </div>
            
            <div class="flex justify-between mb-2">
                <div class="text-gray-600">附加服务</div>
                <div>¥100.00</div>
            </div>
            
            <div class="flex justify-between mb-2">
                <div class="text-gray-600">优惠券</div>
                <div class="text-red-500">-¥50.00</div>
            </div>
            
            <div class="border-t border-gray-200 mt-3 pt-3 flex justify-between font-medium">
                <div>实付金额</div>
                <div class="text-red-500 text-lg">¥649.00</div>
            </div>
        </div>
        
        <!-- 支付方式 -->
        <div class="bg-white p-4 mb-4">
            <h2 class="text-base font-medium mb-3">选择支付方式</h2>
            
            <div class="payment-method active">
                <div class="payment-method-radio"></div>
                <img src="https://www.alipay.com/favicon.ico" class="w-6 h-6 mr-3" alt="支付宝">
                <div>
                    <div class="font-medium">支付宝</div>
                    <div class="text-xs text-gray-500">推荐使用支付宝快捷支付</div>
                </div>
            </div>
            
            <div class="payment-method">
                <div class="payment-method-radio"></div>
                <img src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico" class="w-6 h-6 mr-3" alt="微信支付">
                <div>
                    <div class="font-medium">微信支付</div>
                    <div class="text-xs text-gray-500">使用微信扫码支付</div>
                </div>
            </div>
            
            <div class="payment-method">
                <div class="payment-method-radio"></div>
                <i class="fas fa-credit-card text-gray-600 text-xl mr-3"></i>
                <div>
                    <div class="font-medium">银行卡支付</div>
                    <div class="text-xs text-gray-500">支持国内主要银行借记卡/信用卡</div>
                </div>
            </div>
        </div>
        
        <!-- 支付须知 -->
        <div class="bg-white p-4 mb-4">
            <h2 class="text-base font-medium mb-2">支付须知</h2>
            <div class="text-xs text-gray-600 leading-relaxed">
                <p class="mb-1">1. 支付成功后，订单将立即生效，摄影师会尽快与您联系确认详情。</p>
                <p class="mb-1">2. 如需取消订单，请至少提前48小时，否则将扣除30%违约金。</p>
                <p class="mb-1">3. 如遇特殊情况需改期，请提前与摄影师协商。</p>
            </div>
        </div>
        
        <!-- 底部支付按钮 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg">
            <div class="flex justify-between items-center mb-3">
                <div class="text-sm">实付金额</div>
                <div class="text-red-500 text-xl font-medium">¥649.00</div>
            </div>
            <button class="payment-btn">确认支付</button>
        </div>
    </div>
    
    <script>
        // 加载状态栏
        document.addEventListener('DOMContentLoaded', function() {
            // 创建iOS状态栏
            const statusBar = document.createElement('div');
            statusBar.className = 'bg-black text-white h-7 flex items-center justify-between px-4 text-xs fixed top-0 left-0 right-0 z-50';
            statusBar.innerHTML = `
                <div>
                    <span>9:41</span>
                </div>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            `;
            document.body.prepend(statusBar);
            
            // 支付方式选择
            const paymentMethods = document.querySelectorAll('.payment-method');
            paymentMethods.forEach(method => {
                method.addEventListener('click', function() {
                    paymentMethods.forEach(m => m.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html> 